<template>
    <content-item>
        <div slot="title">常用菜单</div>
        <div slot="action">
            <div @click="changeEditStatus" v-if="this.editStatus == false"><i class="fa fa-unlock"
                    aria-hidden="true"></i>&nbsp;管理</div>
            <div @click="changeEditStatus" v-if="this.editStatus == true"><i class="fa fa-unlock-alt"
                    aria-hidden="true"></i>&nbsp;退出</div>
        </div>
        <div slot="body">
            <div class="content-body">
                <div class="row">
                    <v-contextmenu ref="contextmenu">
                        <v-contextmenu-item @click="handleClick">移除</v-contextmenu-item>
                        <!-- <v-contextmenu-item divider></v-contextmenu-item>
            <v-contextmenu-item @click="handleClick">菜单2</v-contextmenu-item>
            <v-contextmenu-item @click="handleClick">菜单3</v-contextmenu-item> -->
                    </v-contextmenu>

                    <template v-if="editStatus">
                        <div v-for="(item,index) in linkData" :key="index" class="link" @click="sign(item.moduleId)" :title="item.shortcutName">
                            <div class="blue-icon " v-if="item.hasMenu == '1'">
                                <i :class="item.moduleIcon ? 'fa-'+item.moduleIcon : ''" class="fa blue"
                                    style="font-size:35px;" aria-hidden="true"></i>
                            </div>
                            <div class="gray-icon " v-if="item.hasMenu == '0'">
                                <i :class="item.moduleIcon ? 'fa-'+item.moduleIcon : ''" class="fa gray"
                                    style="font-size:25px;" aria-hidden="true"></i>
                            </div>
                            <div class="title" v-if="item.moduleName != null">{{item.moduleName}}</div>
                        </div>
                    </template>
                    <template v-else>
                        <div @click="to(item.shortcutPath)" v-for="(item,index) in linkData" class="link" :key="index" :title="item.shortcutName">
                            <div class="icon" v-contextmenu:contextmenu @contextmenu.prevent="show(item)">
                                <i :class="item.shortcutIcon ? 'fa-'+item.shortcutIcon : ''" class="fa"
                                    style="font-size:25px;" aria-hidden="true"></i>
                            </div>
                            <div class="title" v-if="item.shortcutName != null">{{item.shortcutName}}</div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </content-item>
</template>
<script>
    import contentItem from '../content-item'

    import * as usershortcutService from '@/api/upms/usershortcut'
    import * as menuService from '@/api/upms/menu'
    export default {
        data() {
            return {
                linkData: [],
                editStatus: false,
                currentMenu: {}
            }
        },
        components: {
            contentItem
        },
        created() {
            this.restlinkData();
            this.getUserShortcut(this.editStatus);
        },
        methods: {
            changeEditStatus() {
                this.editStatus = !this.editStatus;
                this.getUserShortcut(this.editStatus);
            },
            getUserShortcut() {
                this.restlinkData();
                if (this.editStatus) {
                    menuService.getusershortcutmenu().then(data => {
                        this.linkData = data
                    })
                } else {
                    usershortcutService.getUserShortcut().then(data => {
                        this.linkData = data
                    })
                }

            },
            handleClick(instance, vnode) {
                usershortcutService.updateusershortcutSign(this.currentMenu.sourceId).then(data => {
                    this.$message.success(data)
                    // this.restlinkData();
                    this.getUserShortcut(false);
                })
            },
            sign(id) {
                usershortcutService.updateusershortcutSign(id).then(data => {
                    this.$message.success(data)
                    this.restlinkData();
                    this.getUserShortcut(this.editStatus);
                })
            },
            restlinkData() {
                this.linkData = [{
                    shortcutPath: '',
                    shortcutIcon: '',
                    shortcutName: ''
                }]
            },
            to(path) {
                if (path != '') {
                    if (/^http[s]?:\/\/.*/.test(path)) {
                        window.open(path, "_blank");
                    } else {
                        this.$router.push(path)
                    }
                }
            },
            show(v) {
                // console.log(v)
                this.currentMenu = v
            },
        }
    }
</script>
<style>
    .blue {
        color: #409EFF;
    }

    .gray {
        color: #b2b2b2;
    }

    .row {
        /* display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center; */
        /* justify-content: space-around; */
        /* padding-bottom: 5px; */
        /* padding-top: 5px; */

        display: grid;
        grid-template-columns: repeat(auto-fill, 65px);
        grid-gap: 10px 10px;
        justify-content: space-around;
    }

    /* .row::after {
        content: "";
        width: 90px;
    } */

    .link {
        align-self: center;
        height: 95px;
        width: 70px;
        /* margin: 10px; */
        /* margin-right: 10px; */
        font-size: 12px;
        position: relative;
        cursor: pointer;
        color: #000;
        /* margin: 0 10px; */
        /* padding: 0 10px; */
        /* flex-basis: 5%; */
    }

    .link:hover {}

    .icon {
        height: 70px;
        width: 70px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border-radius: 6px;
        color: rgb(46, 44, 44);
        background: #e4e4ec;
        /* background: #fafbfe; */
        /* margin-bottom: 5px; */
        /* border: 1px solid rgb(134, 134, 134); */
    }

    .gray-icon {
        height: 70px;
        width: 70px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border-radius: 10px;
        color: #000;
        background: #f9f9fd;
        border: 1px solid #999;
    }

    .blue-icon {
        height: 70px;
        width: 70px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border-radius: 10px;
        color: #000;
        /* background: #409EFF; */
        border: 1px solid #409EFF;
    }

    .title {
        /* height: 34px; */
        font-size: 10px;
        position: absolute;
        bottom: 0px;
        left: 0;
        text-align: center;
        width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content-body {
        box-sizing: border-box;
        padding: 15px;
        height: 350px;
        overflow-y: auto;
        /*  */
    }

    .content-body::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .content-body::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(184, 184, 184, 0.1);
        background: #c0c0c0;
    }

    .content-body::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(49, 49, 49, 0.1);
        border-radius: 10px;
        background: #EDEDED;
    }
</style>